<template>
  <div class="index">
    <Layout>
      <HeaderCmpt />
      
      <Content>
        <div class="container">
          <NavbarCmpt />
          <Row :gutter="48">
              <Col :sm="16" >
                <div class="title">
                  <div class="text">高速要闻</div>
                  <div class="more">查看更多<Icon type="arrow-right-b"></Icon></div>
                </div>
                <div>

                  <Row>
                    <Col :sm="12" >
                      <div>
                        <Carousel autoplay v-model="value" loop>
                          <CarouselItem>
                              <div>1</div>
                          </CarouselItem>
                          <CarouselItem>
                              <div>2</div>
                          </CarouselItem>
                          <CarouselItem>
                              <div>3</div>
                          </CarouselItem>
                          <CarouselItem>
                              <div>4</div>
                          </CarouselItem>
                      </Carousel>
                      </div>
                    </Col>
                    <Col :sm="12" >
                      <Card>
                        <div class='item'>
                          <div><Icon type="arrow-right-b"></Icon><a href="">高速要闻高速要闻高速要闻高速要闻</a></div>
                          <div>2018-09-11</div>
                        </div>
                      </Card>
                    </Col>
                  </Row>
                </div>
              </Col>
              <Col :sm="8" >
                <div class="title">
                  <div class="text">高速要闻</div>
                  <div class="more">查看更多<Icon type="arrow-right-b"></Icon></div>
                </div>
                <Card>
                  <div class='item'>
                    <div><Icon type="arrow-right-b"></Icon><a href="">高速要闻高速要闻高速要闻高速要闻</a></div>
                    <div>2018-09-11</div>
                  </div>
                </Card>
              </Col>
              <Col :sm="12" >
                <div class="title">
                  <div class="text">高速要闻</div>
                  <div class="more">查看更多<Icon type="arrow-right-b"></Icon></div>
                </div>
                <Card>
                  <div class='item'>
                    <div><Icon type="arrow-right-b"></Icon><a href="">高速要闻高速要闻高速要闻高速要闻</a></div>
                    <div>2018-09-11</div>
                  </div>
                </Card>
              </Col>
              <Col :sm="12">
                <div class="title">
                  <div class="text">高速要闻</div>
                  <div class="more">查看更多<Icon type="arrow-right-b"></Icon></div>
                </div>
                 <Card>
                  col-12
                </Card>
              </Col>
              <Col :sm="12">
                <div class="title">
                  <div class="text">高速要闻</div>
                  <div class="more">查看更多<Icon type="arrow-right-b"></Icon></div>
                </div>
                 <Card>
                  col-12
                </Card>
              </Col>
              <Col :sm="12">
                <div class="title">
                  <div class="text">高速要闻</div>
                  <div class="more">查看更多<Icon type="arrow-right-b"></Icon></div>
                </div>
                 <Card>
                  col-12
                </Card>
              </Col>
          </Row>
          <FooterCmpt></FooterCmpt>
        </div>
      </Content>
    </Layout>
  </div>
</template>

<script>
import HeaderCmpt from './Header';
import FooterCmpt from './Footer';
import NavbarCmpt from './Navbar';
import { getReq } from '../api/api';
export default {
  name: 'Index',
  components: {
    HeaderCmpt,
    FooterCmpt,
    NavbarCmpt
  },
  data () {
      return {
          value: 0
      }
  },
  mounted() {
    let _self = this;
    // _self.$Spin.show();
    getReq('/index', {}).then(res => {
      //  _self.$Spin.hide();
    })
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ivu-row {
  margin: 8px 0px;
}
.ivu-col {
  margin: 8px 0px;
}
.title {
  display: flex;
  justify-content: space-between;
}
.item {
  display: flex;
  justify-content: space-between;
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
    margin: auto;
  }
}
</style>
